<template>
  <div>
    <div class="images">
      <div v-for="img in images" :key="img.key" class="item">
        <p>{{img.name}}</p>
        <div class="bd">
          <img :src="img.src?img.src:img.placeholder" alt="" @click="preview(img.src)">
        </div>
        <v-uploader class="uploader" v-model="img.src" @input="imageChange"></v-uploader>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vUploader from '@/components/uploader/index.vue'

  @Component({
    components: {
      vUploader
    }
  })
  export default class BillImages extends Vue {
    @Prop() images

    imageChange () {
      this.$emit('input', this.images)
      this.$emit('change', this.images)
    }

    preview (img) {
      if (!img) return
      window.open(img)
    }
    mounted(){
      setTimeout(_=>{
        console.log(this.images)
      },1000)
    }
  }
</script>
<style lang="less" scoped>
  .images {
    display: flex;
    align-items: start;
    padding-bottom: 20px;
    .item {
      width: 260px;
      text-align: center;
      margin-right: 20px;
      .bd {
        border: 1px solid #ddd;
        padding: 10px 0;
      }

      img {
        width: 240px;
        height: 148px;
      }
    }
    .uploader {
      margin-top: 16px;
    }

  }

  h2, p {
    font-size: 16px;
    color: #666666;
    text-align: center;
  }

  h2 {
    margin-top: 16px;
  }
</style>
